<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="/commons/jsp/taglibs.jsp" %>
<%@ taglib uri="http://www.framework.com/taglib" prefix="frame" %>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<link rel="stylesheet" type="text/css" href="${ctx}/c2c/Public/Home/Css/index.css">
<style type="text/css">
    .clearfix:after {
        content: '';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        line-height: 0;
        font-size: 0
    }

    .main_b3_2 .font {
        color: #333;
        font-size: 14px;
        font-family: 微软雅黑, 黑体, 宋体;
    }

    .options-item i {
        background: url(${ctx}/c2c/Public/Home/Img/detail.png) no-repeat;
    }

    .deal-section {
        float: left;
    }

    .options-item li {
        float: left;
        margin: 0 10px 8px 0;
        position: relative;
        zoom: 1;
        list-style: none;
    }

    .options-item li span {
        display: inline-block;
        padding: 0 10px;
        height: 26px;
        white-space: nowrap;
        font: 12px/26px "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1";
        border: 1px solid #d9d9d9;
        color: #333;
        cursor: pointer;
    }

    .options-item li:hover span, .options-item .current span {
        padding: 0 9px;
        height: 24px;
        border: 2px solid #ef4035;
        line-height: 24px;
    }

    .options-item li .disabled, .options-item li:hover .disabled {
        padding: 0 10px;
        height: 26px;
        line-height: 26px;
        border: 1px dashed #d9d9d9;
        cursor: not-allowed;
    }

    .options-item i {
        display: none;
        position: absolute;
        right: 2px;
        bottom: 2px;
        width: 10px;
        height: 10px;
        background-position: -69px -207px;
    }

    .options-item .current i {
        display: block;
    }

    .button {
        background-color: #f8665b;
        border: none;
        color: white;
        padding: 8px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        cursor: pointer;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        border-radius: 4px;
    }

    .button:hover {
        background-color: #f44336; /* Green */
    }

    .button[disabled] {
        background-color: #e7e7e7;
        color: #999999;
        cursor: no-drop;
    }

</style>
<script type="text/javascript">
    var requestUrl = "http://${basePath}:${port}${ctx}/business/projectmanage/input?projectId=${project.id}&r=" + new Date().getTime();

    //切换出价记录
    function tabChange(obj) {
        var jmp = $(obj).addClass("on").siblings().removeClass("on").children().attr("jmp");
        $(jmp).hide();
        jmp = $(obj).children().attr("jmp");
        $(jmp).show();
    }

    //选择报价
    function priceChange(obj) {
        $("#selectPrice").val($(obj).attr("price"));
        $(obj).addClass("current").siblings().removeAttr("class");
    }

</script>
<div style="padding-left: 15px;padding-top: 15px;">
    <div class="main_b3_3" style="float:left;">
        <div class="addico"></div>
        <ul class="ontab tab_menu clearfix">
            <li class="tab on" onclick="tabChange(this)">
                <a jmp="#recordA" href="javascript:void(0)">出价记录</a>
            </li>
            <li class="tab" onclick="tabChange(this)">
                <a jmp="#recordB" href="javascript:void(0)">我的出价</a>
            </li>
        </ul>
        <div class="ontab_con">
            <!-- 出价记录 -->
            <div id="recordA" class="tab_con" style="width: auto;">
                <table id="bid_record" class="ac-auction-part" style="text-align:center">
                    <tbody>
                    <tr class="th">
                        <th width="29px">状态</th>
                        <th width="250px">出价人</th>
                        <th width="80px">价格</th>
                        <th width="170px">出价时间</th>
                    </tr>
                    <%--定义一个date类型时间戳对象Timestamp--%>
                    <jsp:useBean id="Timestamp" class="java.util.Date"/>
                    <c:forEach var="list" varStatus="status" items="${auctionCompareBidList}">
                        <c:choose>
                            <c:when test="${status.first}">
                                <tr uid="${list.biddrId}" class="lingxian">
                            </c:when>
                            <c:otherwise>
                                <tr uid="${list.biddrId}">
                            </c:otherwise>
                        </c:choose>
                        <td>
                            <div class="bidlistico"></div>
                        </td>
                        <td><span class="on_over" style="width: 60px;">${list.bidderName}</span></td>
                        <td>${list.bidderPrice}</td>
                        <td>
                                <%--将后台传递过来的obj.timstamp转换为date类型的刚才创建的Timestamp对象--%>
                            <c:set target="${Timestamp}" property="time" value="${list.bidderTime}"/>
                                <%--利用fmt标签将date对象进行格式化输出--%>
                            <fmt:formatDate pattern="yyyy-MM-dd HH:mm:ss.SSS" value="${Timestamp}" type="both"/>
                        </td>
                        </tr>
                    </c:forEach>
                    <!-- 竞拍出价记录——end -->
                    </tbody>
                </table>
                <div class="tip">
                    拍品共计出价<span class="red1 fb" id="bidcount">${auctionCompareBidListCount}</span>次，此处显示最近10次出价。
                </div>
            </div>
            <!-- 出价记录——end -->
            <!-- 我的出价 -->
            <div id="recordB" class="tab_con"
                 style="display: none; ${myAuctionCompareBidList.size()>10?'overflow-y:auto;':''} ">
                <table id="my_record" style="text-align:center;width: auto;">
                    <tbody>
                    <tr class="th">
                        <th width="29px">状态</th>
                        <th width="330px">价格</th>
                        <th width="170px">出价时间</th>
                    </tr>
                    <c:forEach var="list" varStatus="status" items="${myAuctionCompareBidList}">
                        <c:choose>
                            <c:when test="${status.first && list.biddrId == auctionCompareBidList[0].biddrId}">
                                <tr uid="${list.biddrId}" class="lingxian">
                            </c:when>
                            <c:otherwise>
                                <tr uid="${list.biddrId}">
                            </c:otherwise>
                        </c:choose>
                        <td>
                            <div class="bidlistico"></div>
                        </td>
                        <td>${list.bidderPrice}</td>
                        <td>
                                <%--将后台传递过来的obj.timstamp转换为date类型的刚才创建的Timestamp对象--%>
                            <c:set target="${Timestamp}" property="time" value="${list.bidderTime}"/>
                                <%--利用fmt标签将date对象进行格式化输出--%>
                            <fmt:formatDate pattern="yyyy-MM-dd HH:mm:ss.SSS" value="${Timestamp}" type="both"/>
                        </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
                <div class="tip" style=" ${myAuctionCompareBidList.size()>10?'position:static;width:auto; ':''}">
                    共计出价<span class="red1 fb" id="mycount">${myAuctionCompareBidList.size()}</span>次。
                </div>
            </div>
            <!-- 我的出价——end -->
        </div>
    </div>
    <div class="main_b3_2" style="margin-right: 10px;">
        <div class="showtimebox clearfix" style="width:375px;">
            <div class="hleft">
                <h1 style="word-wrap: break-word;word-break: break-all;">${auctionInfo.auctionName}(${auctionInfo.code})</h1>
                <div class="onBidTbox">
                    <div class="onBidTbox clearfix" style="font-family: 微软雅黑, 黑体, 宋体;">
                        <div class="th" id="bidTimeStatus"
                             style="color: rgb(153, 153, 153);word-wrap: break-word;word-break: break-all;text-align: left;">
                            尚未开始<span class="zt">距离开拍仅剩</span>
                        </div>
                        <div class="onBidtime" id="onBidtime">
                            <span class="day">0</span>
                            <span class="dw">天</span>
                            <span class="hour">00</span>
                            <span class="dw">时</span>
                            <span class="minute">00</span>
                            <span class="dw">分</span>
                            <span class="second">00</span>
                            <span class="dw">秒</span>
                            <span class="msec">0</span>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="defcon font" style="width: 375px">
            <ul class="bid_info" style="margin-left: -25px;">
                <li>
                    <div id="nowth" class="th">当前价：</div>
                    <span id="nowprice" class="nowprice"><fmt:formatNumber type="number"
                                                                           value="${auctionInfo.GetNewPriceBig()}"
                                                                           pattern="0.00" maxFractionDigits="2"/></span>
                    <span class="nowprice unit" style="font-size: 12px;">元</span>
                </li>
                <li class="wfix">
                    <div class="th">起拍价：</div>
                    <span class="onset"><fmt:formatNumber type="number" value="${auctionInfo.startPrice}" pattern="0.00"
                                                          maxFractionDigits="2"/></span>
                    <span class="unit">元</span>
                </li>
            </ul>
            <div class="pm-bid">
                <div id="manual">
                    <ul class="pm-price">
                        <li class="pm-h">竞拍出价</li>
                        <li>
                            <div class="bid_butbox clearfix" style="text-align: center;margin: 0;margin-bottom: 10px;">
                                <div class="wrapper clearfix">
                                    <div class="deal-section">
                                        <div class="dealinfor">
                                            <input id="selectPrice" type="hidden" value="-1">
                                            <ul class="options-item clearfix">
                                                <li price="${auctionInfo.stepPrice1}" onclick="priceChange(this)">
                                                    <span>+ ${auctionInfo.stepPrice1} 元</span>
                                                    <i></i>
                                                </li>

                                                <li style="${empty(auctionInfo.stepPrice2)?"display: none;":""}"
                                                    price="${auctionInfo.stepPrice2}" onclick="priceChange(this)">
                                                    <span>+ ${auctionInfo.stepPrice2} 元</span>
                                                    <i></i>
                                                </li>

                                                <li style="${empty(auctionInfo.stepPrice3)?"display: none;":""}"
                                                    price="${auctionInfo.stepPrice3}" onclick="priceChange(this)">
                                                    <span>+ ${auctionInfo.stepPrice3} 元</span>
                                                    <i></i>
                                                </li>
                                                <li style="${empty(auctionInfo.stepPrice4)?"display: none;":""}"
                                                    price="${auctionInfo.stepPrice4}" onclick="priceChange(this)">
                                                    <span>+ ${auctionInfo.stepPrice4} 元</span>
                                                    <i></i>
                                                </li>
                                                <li style="${empty(auctionInfo.stepPrice5)?"display: none;":""}"
                                                    price="${auctionInfo.stepPrice5}" onclick="priceChange(this)">
                                                    <span>+ ${auctionInfo.stepPrice5} 元</span>
                                                    <i></i>
                                                </li>
                                                <li style="${empty(auctionInfo.stepPrice6)?"display: none;":""}"
                                                    price="${auctionInfo.stepPrice6}" onclick="priceChange(this)">
                                                    <span>+ ${auctionInfo.stepPrice6} 元</span>
                                                    <i></i>
                                                </li>
                                                <li style="${empty(auctionInfo.stepPrice7)?"display: none;":""}"
                                                    price="${auctionInfo.stepPrice7}" onclick="priceChange(this)">
                                                    <span>+ ${auctionInfo.stepPrice7} 元</span>
                                                    <i></i>
                                                </li>
                                                <li style="${empty(auctionInfo.stepPrice8)?"display: none;":""}"
                                                    price="${auctionInfo.stepPrice8}" onclick="priceChange(this)">
                                                    <span>+ ${auctionInfo.stepPrice8} 元</span>
                                                    <i></i>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <input id="manual_but" style="margin: 0 auto;"
                                       class="button"
                                       type="button" disabled="disabled" value="尚未开始"/>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 判断登录 -->
            <ul class="bid_info3 clearfix" style="display: none">
                <li style="margin-left: -10px;">
                    共<span>-1</span>人参拍
                </li>
            </ul>
            <ul class="bid_info2 clearfix">
                <li class="wfix" style="display: none">
                    保证金：<span class="onset" style="font-weight: bold;font-size: 14px;">${auctionInfo.deposit}<span
                        class="unit">元</span></span></li>
                <li style="width:100%;">
                    延<span style="margin-left: 14px;">时：竞拍最后 ${auctionSleep} 秒，若有用户出价，结束时间将自动延时 ${auctionSleep} 秒，且不断循环。</span>
                </li>
            </ul>
        </div>
    </div>
</div>